/**
 * 删除确认对话框组件
 * 用于确认删除操作，防止误删重要数据
 * 基于 Radix UI AlertDialog 构建，支持自定义触发器和加载状态
 */

'use client';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Trash2, AlertTriangle } from 'lucide-react';

// 组件属性接口
interface DeleteConfirmDialogProps {
  onConfirm: () => void;        // 确认删除的回调函数
  title: string;                // 要删除的项目标题
  description?: string;         // 要删除的项目描述（可选）
  isLoading?: boolean;          // 是否正在加载中
  trigger?: React.ReactNode;    // 自定义触发器（可选）
}

/**
 * 删除确认对话框组件
 * @param onConfirm 确认删除的回调函数
 * @param title 要删除的项目标题
 * @param description 要删除的项目描述
 * @param isLoading 是否正在加载中
 * @param trigger 自定义触发器
 * @returns JSX 元素
 */
export default function DeleteConfirmDialog({
  onConfirm,
  title,
  description,
  isLoading = false,
  trigger
}: DeleteConfirmDialogProps) {
  return (
    <AlertDialog>
      {/* 对话框触发器 */}
      <AlertDialogTrigger asChild>
        {trigger || (
          <Button 
            variant="ghost" 
            size="sm" 
            className="text-destructive hover:text-destructive"
            disabled={isLoading}
          >
            <Trash2 className="h-4 w-4" />
            {isLoading && <span className="ml-1">删除中...</span>}
          </Button>
        )}
      </AlertDialogTrigger>
      
      {/* 对话框内容 */}
      <AlertDialogContent>
        {/* 对话框头部 */}
        <AlertDialogHeader>
          <div className="flex items-center space-x-2">
            <AlertTriangle className="h-5 w-5 text-destructive" />
            <AlertDialogTitle>确认删除</AlertDialogTitle>
          </div>
          <AlertDialogDescription className="text-left">
            <div className="space-y-2">
              <p>您确定要删除以下内容吗？</p>
              {/* 显示要删除的项目信息 */}
              <div className="bg-muted p-3 rounded-md">
                <p className="font-medium">{title}</p>
                {description && (
                  <p className="text-sm text-muted-foreground mt-1">{description}</p>
                )}
              </div>
              {/* 警告信息 */}
              <p className="text-destructive font-medium">
                ⚠️ 此操作无法撤销，删除的内容将永久丢失。
              </p>
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        
        {/* 对话框底部按钮 */}
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isLoading}>
            取消
          </AlertDialogCancel>
          <AlertDialogAction
            onClick={onConfirm}
            disabled={isLoading}
            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
          >
            {isLoading ? '删除中...' : '确认删除'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
